<template>
  <div >
      <router-view class="main_body" />
       <mt-tabbar v-model="selected">
        <mt-tab-item id="dongtai">
            <div class="dongtai"></div>
            动态
        </mt-tab-item>
        <mt-tab-item id="workbench">
            <div class="gongzuotai"></div>
            工作台
        </mt-tab-item>
        <mt-tab-item id="mine">
            <div class="wode"></div>
            我的
        </mt-tab-item>
      </mt-tabbar>
  </div> 
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                selected: this.$route.name,
                useInfo: '',
            }

        },
        watch: {
            selected(curVal, oldVal) {
                switch (curVal) {
                    case 'dongtai':
                        this.$router.push({
                            'path': '/dongtai'
                        })
                        break;
                    case 'workbench':
                        this.$router.push({
                            'path': '/workbench'
                        })
                        break;
                    case 'mine':
                        this.$router.push({
                            'path': '/mine'
                        })
                        break;
                };
            },
        },
        created() {
            var useInfo = sessionStorage.getItem('useInfo');
            if (useInfo) {
                this.useInfo = useInfo
            } else { //如果没有登录信息
                this.$router.push({
                    'path': '/login'
                })
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    li {
        list-style-type: none;
    }
    
    a {
        text-decoration: none;
        color: inherit;
    }
    
    .main_body {
        position: absolute;
        bottom: 56px;
        top: 1.2rem;
        overflow: auto;
        left: 0;
        right: 0;
        background: #f3f3f3;
        border-bottom: 2px solid #e9e9e9
    }
    
    .mint-tabbar {
        background: #fff;
    }
    
    .mint-tabbar>.mint-tab-item.is-selected {
        background: #ffffff;
    }
    
    .mint-tabbar>.mint-tab-item.is-selected .dongtai {
        background-image: url('../../static/images/tabbar/1.1@2x.png');
    }
    
    .mint-tabbar>.mint-tab-item .dongtai {
        background-image: url('../../static/images/tabbar/1@2x.png');
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 auto 0.2rem;
    }
    
    .mint-tabbar>.mint-tab-item.is-selected .gongzuotai {
        background-image: url('../../static/images/tabbar/2.1@2x.png');
    }
    
    .mint-tabbar>.mint-tab-item .gongzuotai {
        background-image: url('../../static/images/tabbar/2@2x.png');
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 auto 0.2rem;
    }
    
    .mint-tabbar>.mint-tab-item.is-selected .wode {
        background-image: url('../../static/images/tabbar/3.1@2x.png');
    }
    
    .mint-tabbar>.mint-tab-item .wode {
        background-image: url('../../static/images/tabbar/3@2x.png');
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 auto 0.2rem;
    }
</style>